<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <div class="btns">
        <button data-path="news">新闻</button>
        <button data-path="play">娱乐</button>
        <button data-path="game">游戏</button>
      </div>
      <div class="container"></div>
    </div>
  </body>
</html>
<script>
  const EleContainer = document.querySelectorAll('.container');

  // 1. 书写一个路由表，在实现路由的时候，按照这个路由表的映射关系决定
  const routers = [
    { path: '/news', content: '我是新闻' },
    { path: '/play', content: '我是娱乐' },
    { path: '/game', content: '我是游戏' },
  ];

  const EleBtns = document.querySelectorAll('.btns button');
  // 2. 给每一个导航绑定点击事件，可以根据导航上的属性，使用history对象的pushState方法或者replaceState方法（不会留下历史记录）来进行改变地址不刷新页面
  for (var i = 0; i < EleBtns.length; i++) {
    EleBtns[i].onclick = function () {
      history.pushState(null, null, this.dataset.path);

      // 改变就立马去更新视图
      routers.forEach((item) => {
        if (item.path.slice(1) === this.dataset.path) {
          EleContainer.textConent = item.content;
        }
      });
    };
  }
</script>
